<template>
  <div class="app-container">
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="35%" v-dialog-drag append-to-body>
      <el-form ref="formRef" :model="formData" v-loading="formLoading" label-width="100px">
        <el-form-item label="RFID编码" prop="rfidCode">
          <el-input v-model="formData.rfidCode" placeholder="请输入托盘编码" style="width: 220px" size="small" disabled/>&nbsp;
        </el-form-item>
      </el-form>
      <el-table v-if="materialList.length > 0" :data="materialList" :stripe="true" :show-overflow-tooltip="true" style="width: 90%;margin: 0px auto;">
        <el-table-column label="产品码" align="center" prop="code"/>
        <el-table-column label="箱码" align="center" prop="boxCode"/>
        <el-table-column label="状态" align="center" prop="pickStatus">
          <template v-slot="scope">
            <span v-if="scope.row.pickStatus === 0">未拾取</span>
            <span v-if="scope.row.pickStatus === 1">拾取</span>
          </template>
        </el-table-column>
      </el-table>
      <el-table v-if="materialBoxList.length > 0" :data="materialBoxList" :stripe="true" :show-overflow-tooltip="true" style="width: 90%;margin: 0px auto;">
        <el-table-column label="箱码" align="center" prop="code"/>
        <el-table-column label="数量" align="center" prop="materialCount"/>
        <el-table-column label="状态" align="center" prop="pickStatus">
          <template v-slot="scope">
            <span v-if="scope.row.pickStatus === 0">未拾取</span>
            <span v-if="scope.row.pickStatus === 1">拾取</span>
          </template>
        </el-table-column>
      </el-table>
      <el-table v-if="materialRfidList.length > 0" :data="materialRfidList" :stripe="true" :show-overflow-tooltip="true" style="width: 90%;margin: 0px auto;">
        <el-table-column label="RFID编码" align="center" prop="code"/>
        <el-table-column label="数量" align="center" prop="materialCount"/>
        <el-table-column label="状态" align="center" prop="pickStatus">
          <template v-slot="scope">
            <span v-if="scope.row.pickStatus === 0">未拾取</span>
            <span v-if="scope.row.pickStatus === 1">拾取</span>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="openPickDialog" size="small">扫码拣货</el-button>
        <el-button type="primary" @click="openPickResultDialog" size="small">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="pickDialogTitle" :visible.sync="pickDialogVisible" width="35%" v-dialog-drag append-to-body>
      <el-form ref="pickFormRef" :model="pickFormData" label-width="100px">
        <el-form-item label="编码" prop="code">
          <el-input v-model="pickFormData.code" placeholder="请输入拣货物料\物料箱\RFID\托盘" style="width: 300px" size="small"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitPickDialog" size="small">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="pickResultDialogTitle" :visible.sync="pickResultDialogVisible" width="35%" v-dialog-drag append-to-body>
      <el-table v-if="pickMaterialList.length > 0" :data="pickMaterialList" :stripe="true" :show-overflow-tooltip="true" style="width: 90%;margin: 0px auto;">
        <el-table-column label="产品码" align="center" prop="code"/>
        <el-table-column label="数量" align="center" prop="materialCount">
          <template v-slot="scope">
            <span>1</span>
          </template>
        </el-table-column>
      </el-table>
      <el-table v-if="pickMaterialBoxList.length > 0" :data="pickMaterialBoxList" :stripe="true" :show-overflow-tooltip="true" style="width: 90%;margin: 0px auto;">
        <el-table-column label="箱码" align="center" prop="code"/>
        <el-table-column label="数量" align="center" prop="materialCount"/>
      </el-table>
      <el-table v-if="pickMaterialRfidList.length > 0" :data="pickMaterialRfidList" :stripe="true" :show-overflow-tooltip="true" style="width: 90%;margin: 0px auto;">
        <el-table-column label="RFID编码" align="center" prop="code"/>
        <el-table-column label="数量" align="center" prop="materialCount"/>
      </el-table>
      <div style="margin: 20px auto; width: max-content">
        合计：{{ totalCount }}
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitPickResultDialog" size="small">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {getToBePickedMaterialBoxList, getToBePickedMaterialList, lightFlash, push} from "@/api/hs/scan";

export default {
  name: "PickScanForm",
  data() {
    return {
      // 弹出层标题
      dialogTitle: "",
      // 是否显示弹出层
      dialogVisible: false,
      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
      formLoading: false,
      // 表单参数
      formData: {
        pickTaskId: undefined,
        rfidCode: undefined,
        materialModeCode: undefined,
      },
      // 物料明细
      materialList: [],
      // materialCodeSet: [],
      pickMaterialList: [],
      // 物料箱明细
      materialBoxList: [],
      // materialBoxCodeSet: [],
      pickMaterialBoxList: [],

      // RFID
      materialRfidList: [],
      pickMaterialRfidList: [],

      pickDialogTitle: "",
      pickDialogVisible: false,
      pickFormData: {},
      pickMaterialCodeList: [],
      pickMaterialBoxCodeList: [],
      pickMaterialRfidCodeList: [],

      pickResultDialogTitle: "拣货合计",
      pickResultDialogVisible: false,
      totalCount: 0,
    }
  },
  methods: {
    // /** 打开弹窗 */
    // async open(row) {
    //   lightFlash(row.rfidCode, row.light);
    //   this.reset();
    //   this.formData.rfidCode = row.rfidCode;
    //   this.dialogVisible = true;
    //   this.dialogTitle = "拣货";
    //   this.formLoading = true;
    //   this.materialCodeSet = row.materialCodeSet
    //   this.materialBoxCodeSet = row.boxCodeSet;
    //   const params = {
    //     pickTaskId: row.pickTaskId,
    //     rfidCode: row.rfidCode,
    //   }
    //   const res1 = await getToBePickedMaterialList(params);
    //   if (res1.code === 0) {
    //     this.materialList = res1.data;
    //   }
    //   const res2 = await getToBePickedMaterialBoxList(params);
    //   if (res2.code === 0) {
    //     this.materialBoxList = res2.data;
    //   }
    //   this.formLoading = false;
    // },
    /** 打开弹窗 */
    async open(row) {
      lightFlash(row.rfidCode, row.light);
      this.reset();
      this.resetPickResultFormData();
      this.dialogVisible = true;
      this.dialogTitle = "拣货";
      this.formData = {
        pickTaskId: row.pickTaskId,
        rfidCode: row.rfidCode,
        materialModeCode: row.materialModeCode,
        light: row.light,
      };
      this.formLoading = true;
      if (row.light === 1) {
        const res = await getToBePickedMaterialList(this.formData);
        this.materialList = res.data;
      } else if(row.light === 3) {
        this.materialRfidList.push({
          code: row.rfidCode,
          trayCode: row.trayCode,
          materialCount: row.count,
          pickStatus: 0,
        })
      } else if(row.light === 4) {
        const res = await getToBePickedMaterialBoxList(this.formData);
        this.materialBoxList = res.data;
      }
      this.formLoading = false;
    },
    // 扫码添加
    add() {
    },
    reset() {
      this.formData = {};
      this.materialList = [];
      this.materialBoxList = [];
      this.materialRfidList = [];
    },
    openPickDialog() {
      this.resetPickFormData();
      this.pickDialogVisible = true;
      this.pickDialogTitle = "扫码拣货";
    },
    // submitPickDialog() {
    //   let flg = false;
    //   this.materialCodeSet.forEach(item => {
    //     if (item === this.pickFormData.code) {
    //       this.materialList.forEach(material => {
    //         if (material.code === this.pickFormData.code) {
    //           material.pickStatus = 1;
    //         }
    //       })
    //       if (!this.pickMaterialCodeList.includes(item)) {
    //         this.pickMaterialCodeList.push(item);
    //         flg = true;
    //       }
    //     }
    //   });
    //   this.materialBoxCodeSet.forEach(item => {
    //     if (item === this.pickFormData.code) {
    //       if (this.materialCodeSet.length > 0) {
    //         this.materialList.forEach(material => {
    //           if (material.boxCode === this.pickFormData.code) {
    //             material.pickStatus = 1;
    //           }
    //         })
    //         if (!this.pickMaterialCodeList.includes(item)) {
    //           this.pickMaterialCodeList.push(item);
    //           flg = true;
    //         }
    //       } else {
    //         this.materialBoxList.forEach(materialBox => {
    //           if (materialBox.code === this.pickFormData.code) {
    //             materialBox.pickStatus = 1;
    //           }
    //         })
    //         if (!this.pickMaterialBoxCodeList.includes(item)) {
    //           this.pickMaterialBoxCodeList.push(item);
    //           flg = true;
    //         }
    //       }
    //     }
    //   });
    //   if (!flg) {
    //     this.$message.error("扫码信息并非本次要出库的物料、物料箱信息");
    //     return;
    //   }
    //   this.pickDialogVisible = false;
    // },
    submitPickDialog() {
      let flg = 1;
      this.materialList.forEach(item => {
        if (item.code === this.pickFormData.code) {
          item.pickStatus = 1;
          if (!this.pickMaterialCodeList.includes(item.code)) {
            this.pickMaterialCodeList.push(item.code);
            this.pickMaterialList.push(item);
            flg = 0;
          } else {
            flg = 2;
          }
        }
      });
      this.materialBoxList.forEach(item => {
        if (item.code === this.pickFormData.code) {
          item.pickStatus = 1;
          if (!this.pickMaterialBoxCodeList.includes(item.code)) {
            this.pickMaterialBoxCodeList.push(item.code);
            this.pickMaterialBoxList.push(item);
            flg = 0;
          } else {
            flg = 2;
          }
        }
      });
      if (this.materialRfidList.length > 0) {
        this.materialRfidList[0].pickStatus = 1;
        if (!this.pickMaterialRfidCodeList.includes(this.materialRfidList[0].code)) {
          this.pickMaterialRfidCodeList.push(this.materialRfidList[0].code);
          this.pickMaterialRfidList.push(this.materialRfidList[0]);
          flg = 0;
        } else {
          flg = 2;
        }
      }
      if (flg === 1) {
        this.$message.error("扫码信息并非本次要出库的物料、物料箱、托盘或RFID信息。");
        return;
      } else if (flg === 2) {
        this.$message.error("扫码信息重复。");
        return;
      }
      this.pickDialogVisible = false;
    },
    openPickResultDialog() {
      const hasUnpickedMaterial = this.materialList.some(item => item.pickStatus === 0);
      const hasUnpickedMaterialBox = this.materialBoxList.some(item => item.pickStatus === 0);
      const hasUnpickedMaterialRfid = this.materialRfidList.some(item => item.pickStatus === 0);
      if (hasUnpickedMaterial || hasUnpickedMaterialBox || hasUnpickedMaterialRfid) {
        this.$message.error("仍有待拾取的物料，请继续拣货。");
        return;
      }
      this.totalCount = 0;
      this.pickResultDialogVisible = true;
      if (this.pickMaterialList.length > 0) {
        this.totalCount = this.pickMaterialList.length;
      } else if (this.pickMaterialBoxList.length > 0) {
        this.pickMaterialBoxList.forEach(item => {
          this.totalCount += item.materialCount;
        })
      } else if (this.pickMaterialRfidList.length > 0) {
        this.totalCount = this.pickMaterialRfidList[0].materialCount;
      }
    },
    async submitPickResultDialog() {
      await this.submitForm();
      this.pickResultDialogVisible = false;
      this.pickDialogVisible = false;
    },
    // 确定, 扫码拣货完成
    async submitForm() {
      const data = {
        pickTaskId: this.formData.pickTaskId,
        materialModeCode: this.formData.materialModeCode,
        pickMaterialCodeList: this.pickMaterialCodeList,
        pickMaterialBoxCodeList: this.pickMaterialBoxCodeList,
        pickMaterialRfidCodeList: this.pickMaterialRfidCodeList,
      }
      const res = await push(data);
      if (res.code === 0) {
        this.$message.success("操作成功");
        this.dialogVisible = false;
        this.$emit("success", this.formData.pickTaskId);
      }
    },
    resetPickFormData() {
      this.pickFormData = {};
    },
    resetPickResultFormData() {
      this.pickMaterialList = [];
      this.pickMaterialBoxList = [];
      this.pickMaterialRfidList = [];
      this.totalCount = 0;
      this.pickMaterialCodeList = [];
      this.pickMaterialBoxCodeList = [];
      this.pickMaterialRfidCodeList = [];
    }
  }
}
</script>
